<template>
    <el-container class="afterSale-warp">
        <el-aside width="248px" style="border-right: 1px solid #dcdfe6; position: relative;">
            <left @selectedMails="_selectedMails"></left>
        </el-aside>
        <el-container v-show="open">
            <el-header height="auto" style="padding: 0">
                <v-header ref="headers"></v-header>
            </el-header>
            <el-main style="position: relative;">
                <replyContent ref="replyContent" @isSend="isSend"></replyContent>
            </el-main>
            <el-footer height="auto" style="padding:0;">
                <footerReply @reply="_replyContent" :contentItem="contentItem"></footerReply>
            </el-footer>
        </el-container>
    </el-container>
</template>
<script>
export default {
    data() {
        return {
            open: false,
            contentItem: {}
        };
    },
    methods: {
        _selectedMails(item) {
            this.open = true;
            this.contentItem = item;
            this.$refs.headers.templateDatas(item);
            this.$refs.replyContent.emailAddress(item);
        },
        _replyContent() {
            this.$refs.replyContent.emailAddress(this.contentItem);
        }, 
        isSend(bl) {
            this.contentItem.isSend = bl;
        }
    },
    components: {
        left: resolve => require(["./claim-left.vue"], resolve),
        vHeader: resolve => require(["./claim-header.vue"], resolve),
        replyContent: resolve => require(["./claim-content.vue"], resolve),
        footerReply: resolve => require(["./claim-footer.vue"], resolve)
    }
};
</script>
<style lang="scss" scoped>
.el-aside{
    overflow: visible;
}
.afterSale-warp {
    border: 1px solid rgb(238, 238, 238);
    position: absolute;
    top: 42px;
    bottom: 0;
    left: 0;
    right: 0;
    width: auto!important
}
</style>
